<template>
    <div>
        <Card dis-hover :bordered="false">
            <jgsearch :searchData="searchData" @click="handleOpenCreate" @on-change-change="changeaskdata"
                @on-change-changes="changesaskdata" @on-change-date="dateaskdata" />
            <div class="sky-task">
                <Row :gutter="32">
                    <Col span="6">
                    团队基础：
                    <b>
                        {{ tasks_info.finish_target_num || 0 }}/{{
                        tasks_info.base_target_num || 0
                        }}
                    </b>
                    </Col>
                    <Col span="6">
                    团队冲刺：
                    <b>
                        {{ tasks_info.finish_target_num || 0 }}/{{
                        tasks_info.sprint_target_num || 0
                        }}
                    </b>
                    </Col>
                    <Col span="6">
                    团队超冲刺：
                    <b>
                        {{ tasks_info.finish_target_num || 0 }}/{{
                        tasks_info.super_sprint_target_num || 0
                        }}
                    </b>
                    </Col>
                    <Col span="6">
                    我的任务：
                    <b>
                        {{ tasks_info.me_finish_target_num || 0 }}/{{
                        tasks_info.me_target_num || 0
                        }}
                    </b>
                    </Col>
                </Row>
            </div>
            <div class="ivu-clearfix"></div>
            <Table highlight-row ref="table" :columns="columns" :data="list" :loading="loading" size="small">
                <template slot-scope="{ row }" slot="state">
                    <div v-if="!row.task_num">/</div>
                    <div v-else>
                        <Tag v-if="row.progress_level === 2" color="primary">
                            {{ row.progress_str }}
                        </Tag>
                        <Tag v-if="row.progress_level === 1" color="warning">
                            {{ row.progress_str }}
                        </Tag>
                        <Tag v-if="row.progress_level === 3" color="success">
                            {{ row.progress_str }}
                        </Tag>
                    </div>
                </template>
                <template slot-scope="{ row }" slot="progress">
                    <div v-if="!row.task_num">/</div>
                    <Progress v-else :percent="
                            +row.finish_rate >= 100 ? 100 : row.finish_rate
                        " :stroke-color="['#108ee9', '#87d068']">{{ row.finish_rate }}%</Progress>
                </template>
            </Table>
        </Card>
        <Modal v-model="showCreate" :mask-closable="false" :title="task ? '任务分配' : '编辑任务'" :loading="creating"
            width="800" @on-cancel="canceledit">
            <Form :model="taskForm" label-position="top">
                <Row :gutter="24">
                    <Col span="6">
                    <FormItem label="月份">
                        <DatePicker :editable="false" :clearable="false" type="month" :options="dateOption" v-model="month"
                            @on-change="handleOpenCreate"></DatePicker>
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem label="基础目标">
                        <InputNumber :min="0" :formatter="$inputday" v-model="taskForm.base_target_num" />
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem label="冲刺目标">
                        <InputNumber :min="0" :formatter="$inputday" v-model="taskForm.sprint_target_num" />
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem label="超冲刺目标">
                        <InputNumber :min="0" :formatter="$inputday" v-model="taskForm.super_sprint_target_num" />
                    </FormItem>
                    </Col>
                    <Divider class="ivu-mt-0"></Divider>
                    <Col span="6" v-for="item in taskForm.member" :key="item.id">
                    <FormItem :label="item.name">
                        <InputNumber class="ivu-ml-8" :min="0" :formatter="$inputday" v-model="item.task_num" />
                    </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button @click="canceledit">取消</Button>
                <Button type="primary" :loading="subloading" @click="submitedit">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import jgsearch from "@/components/search";
    import dayjs from "dayjs";
    import {
        plantaskslist,
        plantasksselectinfo,
        plantasksallotinfo,
        plantasksallot,
    } from "@api/hqapi";
    export default {
        name: "tasks",
        components: { jgsearch },
        data() {
            return {
                loading: false,
                subloading: false,
                task: true,
                showCreate: false,
                creating: false,
                dateOption: {
                    disabledDate(pick) {
                        const curDate = new Date();
                        curDate.setTime(curDate.getTime() - 3600 * 1000 * 24 * 30);
                        let reVal = 0;
                        if (pick < curDate) {
                            reVal = 1;
                        }
                        return reVal;
                    },
                },
                month: new Date(),
                taskForm: {},
                list: [],
                tasks_info: {},
                columns: [
                    { title: "咨询员", key: "member_name" },
                    { title: "月份", key: "date_time" },
                    { title: "任务量", key: "task_num" },
                    { title: "已完成", key: "finish_num" },
                    { title: "进度", key: "progress", slot: "progress" },
                    { title: "进度状态", key: "state", slot: "state" },
                ],
                searchData: {
                    project: [
                        {
                            id: 1,
                            key: "DatePicker",
                            options: {
                                disabledDate(pick) {
                                    const curDate = new Date();
                                    let reVal = 0;
                                    if (pick > curDate) {
                                        reVal = 1;
                                    }
                                    return reVal;
                                },
                            },
                            clearable: false,
                            type: "month",
                            style: { width: "200px" },
                            value: "",
                            callback: "date",
                        },
                        {
                            id: 2,
                            key: "Select",
                            placeholder: "部门",
                            style: { width: "200px" },
                            value: "",
                            childList: [],
                            callback: "change",
                        },
                        {
                            id: 3,
                            key: "Select",
                            placeholder: "咨询员",
                            clearable: true,
                            style: { width: "200px" },
                            value: "",
                            childList: [],
                            callback: "changes",
                        },
                    ],
                    button: [
                        {
                            key: "分配任务",
                            type: "primary",
                            has: {
                                name: "plan-tasks-allot",
                                flag: "v1/plan/tasks/allot",
                            },
                        },
                    ],
                },
                department: [],
                member: [],
                memberlist: [],
                params: {
                    page: 1,
                    pageSize: 10,
                    month: new Date(),
                    department_id: "",
                    member_id: "",
                },
            };
        },
        mounted() {
            this.initial();
        },
        methods: {
            /* @函数功能: 初始化 */
            initial() {
                plantasksselectinfo().then((res) => {
                    this.department = res.department;
                    this.member = res.member;
                    this.params.department_id = this.department[0].id;
                    this.searchData.project[0].value = new Date();
                    for (let item of this.department) {
                        if (item.is_default) {
                            this.searchData.project[1].value = item.id
                        }
                    }
                    this.searchData.project[1].value = this.department[0].id;
                    this.searchData.project[1].childList = this.department;
                    for (let item of this.member) {
                        if (+this.params.department_id === +item.value) {
                            this.searchData.project[2].childList = item.children
                        }
                    }
                    this.changeaskdata(this.department[0].id);
                });
            },
            askData() {
                this.loading = true;
                plantaskslist(this.params).then((res) => {
                    this.list = res.list;
                    this.tasks_info = res.tasks_info;
                    this.loading = false;
                });
            },
            changeaskdata(e) {
                this.searchData.project[0].value = dayjs(
                    this.searchData.project[0].value
                ).format("YYYY-MM-DD");
                let searchData = JSON.parse(JSON.stringify(this.searchData));
                this.memberlist = [];
                this.member.forEach((item) => {
                    if (+item.value === +e) {
                        this.memberlist.push(...item.children);
                    }
                });
                // this.searchData.project.forEach(item=>{
                //   if(item.id === 3) item.childList.push(...this.memberlist)
                // })
                searchData.project[2].childList = [];
                this.$nextTick(() => {
                    searchData.project[2].childList = this.memberlist;
                    this.searchData = JSON.parse(JSON.stringify(searchData));
                });
                // this.$set(this.searchData.project[2],'childList', this.memberlist)

                this.params.department_id = this.searchData.project[1].value;
                this.askData();
            },
            changesaskdata(e) {
                this.params.member_id = e;
                this.askData();
            },
            dateaskdata(e) {
                this.params.month = e;
                this.askData();
            },
            handleOpenCreate() {
                let config = {
                    month: this.month,
                    department_id: this.params.department_id,
                };
                plantasksallotinfo(config).then((res) => {
                    res.base_target_num = parseInt(res.base_target_num || 0);
                    res.sprint_target_num = parseInt(res.sprint_target_num || 0);
                    res.super_sprint_target_num = parseInt(
                        res.super_sprint_target_num || 0
                    );
                    for (let item of res.member) {
                        item.task_num = parseInt(item.task_num || 0);
                    }
                    this.taskForm = res;
                    this.showCreate = true;
                });
            },
            canceledit() {
                this.showCreate = false;
            },
            submitedit() {
                let config = {
                    month: this.month,
                    department_id: this.params.department_id,
                    base_target_num: this.taskForm.base_target_num,
                    sprint_target_num: this.taskForm.sprint_target_num,
                    super_sprint_target_num: this.taskForm.super_sprint_target_num,
                    member_tasks: JSON.stringify(this.taskForm.member),
                };
                this.subloading = true;
                plantasksallot(config)
                    .then(() => {
                        this.$Message.success("录入成功");
                        this.askData();
                        this.showCreate = false;
                        setTimeout(() => {
                            this.subloading = false;
                        }, 500);
                    })
                    .catch(() => {
                        this.subloading = false;
                    });
            },
        },
    };
</script>
<style scoped>
    .sky-task {
        padding: 8px 32px 24px;
    }

    .sky-task b {
        font-size: 18px;
    }

    .person {
        color: #999;
    }
</style>